<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Non Linear Slider - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css"
	href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Non Linear Slider</h2>
	<p>This example shows how to create a slider with a non-linear
		scale.</p>
	<div style="margin: 20px 0 50px 0;"></div>
	<div style="padding: 2px">
		<input class="easyui-slider" style="width: 400px"
			data-options="
			showTip:true,
			rule: [0,'PI/4','PI/2'],
			min:0,
			max:300,
			tipFormatter:function(value){
				return (value/300.0).toFixed(4);
			},
			converter:{
				toPosition:function(value,size){
					var opts = $(this).slider('options');
					return Math.asin(value/opts.max)/(Math.PI)*2*size;
				},
				toValue:function(pos,size){
					var opts = $(this).slider('options');
					return Math.sin(pos/size*Math.PI/2)*opts.max;
				}
			},
			onChange:function(v){
				var opts = $(this).slider('options');
				var pos = opts.converter.toPosition.call(this, v, opts.width);
				var p = $('<div class=point></div>').appendTo('#cc');
				p.css('top', v);
				p.css(opts.reversed?'right':'left', pos);
			}
			">
	</div>
	<div style="margin-bottom: 30px"></div>
	<div id="cc" class="easyui-panel"
		style="position: relative; width: 404px; height: 304px;"></div>

	<style scoped="scoped">
.point {
	position: absolute;
	width: 2px;
	height: 2px;
	font-size: 0;
	background: red;
}
</style>
</body>
</html>